<template>
  <el-dialog ref="dataDialog" class="data-dialog" width="30%" draggable>
    <el-row>
      <el-col :span="24">
        <el-select v-model="selectedData" filterable placeholder="Select" value-key="fileName">
          <div v-for="item in traObjects" :key="item.fileName">
            <el-option
              :label="item.fileName"
              :value="item"
              v-if="!item.fileName.endsWith(filterNameSuffix)"
            />
          </div> </el-select
      ></el-col>
      <el-col :span="24" style="text-align: right">
        <el-popconfirm
          title="Are you sure to process this data?"
          width="300px"
          @Confirm="confirmProcess"
        >
          <template #reference>
            <el-button class="common-text" type="primary">Confirm</el-button>
          </template>
        </el-popconfirm>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { mapState } from 'vuex';
import { ElMessage } from 'element-plus';

export default {
  props: {
    filterNameSuffix: {
      type: String,
      default: '',
    }, //需要过滤的名字后缀
  },
  data() {
    return {
      selectedData: '', //选择的数据
      options: [
        {
          value: { name: 'Option1' },
          label: 'Option1',
        },
        {
          value: { name: 'Option2' },
          label: 'Option2',
        },
        {
          value: { name: 'Option3' },
          label: 'Option3',
        },
      ],
    };
  },
  methods: {
    // 确认点击后，执行算法
    confirmProcess() {
      //如果已经处理过，则不再处理
      if (
        this.traObjects.some(
          (item) => item['fileName'] === `${this.selectedData.fileName}${this.filterNameSuffix}`,
        )
      ) {
        ElMessage.error(`this data has been processed!`);
        return;
      }
      // 判断是否有选择数据
      if (!this.selectedData) {
        ElMessage.error('No Data is selected! can not process!');
      } else {
        this.$emit('confirmDialog', this.selectedData); //触发确认事件
      }
      this.selectedData = ''; //重置
    },
  },
  computed: {
    ...mapState(['traObjects']), //从vuex获取轨迹对象集合
  },
};
</script>

<style lang="scss" scoped></style>
